<template>
    <div class="paper-foot">
        <div class="bottom">
            <slot name="bottom-top"></slot>

            <div class="left">
                <!-- 点赞 -->
                <!-- <div 
                v-if="/like/.test(layouts)"
                class="like transition ml0"
                :class="{active: likedinfo.isoperated}"
                @click="likeHandler"
                >
                    <i class="iconfont primary" v-if="likedinfo.isoperated">&#xe60c;</i>
                    <i class="iconfont" v-else>&#xe601;</i>
                </div> -->
                <!-- 评论 -->
                <!-- <div 
                v-if="/like/.test(layouts)"
                class="like transition"
                >
                    <i class="iconfont">&#xe603;</i>{{likedinfo.likedamount ? likedinfo.likedamount : '10'}}
                </div> -->
                <!-- 分享 -->
                <!-- <share-popover
                :share="share"
                class="btn"
                >   
                    <div 
                    v-if="/share/.test(layouts)"
                    class="like transition"
                    slot="reference"
                    >
                        <i class="iconfont">&#xe86e;</i>分享
                    </div>
                </share-popover> -->

                <!-- 收藏 -->
                <div 
                v-if="/collect/.test(layouts)"
                class="collect transition"
                :class="{active: collectinfo.isoperated}" 
                @click="collectHandler(data)"
                >   
                    <template v-if="collectinfo.isoperated">
                        <i class="iconfont primary">&#xe62b;</i>{{collectinfo.collectamount}}
                    </template>

                    <template v-else>
                        <i class="iconfont">&#xe602;</i>收藏
                    </template>
                </div>
            </div>
            <div class="right">

                <!-- <span v-if="data.price" style="color:#666;">￥ {{data.price}} 元</span> -->
                <slot name="bottom-right"></slot>
                <el-button 
                class="btn"
                v-if="/download/.test(layouts)"
                type="primary" 
                plain 
                size="small"
                @click="$emit('download')"
                >
                    立即下载
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import TOOLBAR_MIXIN from '@components/sys/item-tool-bar/mixins/index';

import itemTag from '@components/sys/dialog-tags/components/item-tag';
import SharePopover from './item-tool-bar/components/share-popover';

export default {
    mixins: [TOOLBAR_MIXIN],
    components: {
        itemTag,
        SharePopover,
    },
    props: {
        layouts: {
            type: String,
            default: 'like,collect,share',
        },
        data: {
            type: Object,
            default: () => ({
                like: 60,
                liked: true,
                collected: false,
            }),
        },
        searchUrl: {
            type: String,
            default: '/search',
        },
        majorSpecial: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        keyWordsArr() {
            var keywords = this.data.keywords;

            if (keywords) {
                return keywords.split(',');
            } else {
                return [];
            }
        },
    },
    methods: {
        tagClick(key, value, item = {}) {
            if (this.majorSpecial) {
                if (item.classifycode === 'TC1') {
                    this.$router.push({
                        path: '/document',
                        query: {
                            tagids: value,
                        },
                    });
                    
                    return;
                }

                if (key === 'doctypecode') {
                    this.$router.push({
                        path: '/document',
                        query: {
                            doctypecode: value,
                        },
                    });

                    return;
                }
            }

            window.open(`${this.searchUrl}?${key}=${value}`);
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .paper-foot {
        .top{
            padding: 40px 0;
            text-align: center;

            .big-btn {
                display: inline-block;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color: #9ba5af;
                color: white;
                padding-top: 16px;
                cursor: pointer;
                vertical-align: middle;

                & + .big-btn{
                    margin-left: 48px;
                }

                &.active, &:hover{
                    background: $primaryColor;
                }

                .iconfont {
                    font-size: 24px;
                }

                .num{
                    font-size: 14px;
                    line-height: 1em;
                    margin-top: 10px;
                }
            }
        }

        .bottom{
            padding-top: 35px;
            padding-bottom: 10px;
            overflow: hidden;
            border-bottom: 1px solid #f0f0f0;
            background: white;
            width: 750px;

            .left {
                float: left;
                // vertical-align: middle;

                div {
                    cursor: pointer;
                    line-height: 20px;
                    // margin-left: 20px;
                    float: left;
                    display: flex;

                    .iconfont {
                        font-size: 20px;
                        display: inline-block;
                    }
                }
                .primary {
                    color: $warningColor;
                }
                .ml0 {
                    margin-left: 0;
                }
            }

            .right {
                float: right;

                .btn{
                    background: none;

                    &:hover, &:focus{
                        background: $primaryColor;
                    }
                }
            }

            .tag-type {
                padding-top: 9px;
                padding-bottom: 9px;
            }
        }
    }
</style>